@import '../base.scss';
@function rem($size) {
    @return ($size/108)*1rem;
}

.ml30 {
    margin-left: rem(30);
}

* {
    box-sizing: border-box;
}

body {
    background: url('../../images/zhsh_1012/qcwd/body-bg.jpg')no-repeat center/100% 100%; // height: 100%;
    font-size: 16px
}

.main {
    width: 100%;
    .title-1,
    .title-2,
    .title-3 {
        height: rem(234);
        width: 100%;
        background: url('../../images/zhsh_1012/qcwd/images/banner_01.jpg')no-repeat center/100% 100%;
    }
    .title-2 {
        background-image: url('../../images/zhsh_1012/qcwd/images/banner_02.gif');
    }
    .title-3 {
        background-image: url('../../images/zhsh_1012/qcwd/images/banner_03.gif');
    }
    .nav {
        display: flex;
        position: relative;
        left: 50%;
        transform: translateY(1px);
        margin-left: rem(-236);
        margin-top: rem(30);
        width: rem(236*2)+rem(30);
        li {
            width: rem(236);
            height: rem(50);
            text-align: center;
            line-height: rem(50);
            color: white;
            background-color: #FF7D42;
            border-top-left-radius: rem(40);
            border-top-right-radius: rem(40);
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
            position: relative;
            &::after {
                content: '';
                position: absolute;
                width: rem(22);
                height: rem(20);
                top: rem(16);
                right: rem(20);
                background: url('../../images/zhsh_1012/qcwd/down.png')no-repeat center/100% 100%;
            }
            &.cur {
                background-color: #FFC897;
                margin-left: rem(30);
            }
            &:nth-child(1) {
                &::after {
                    right: rem(46)
                }
            }
        }
    }
    .container {
        width: 96%;
        background-color: #FF7D42;
        display: block;
        margin: 0 auto;
        border-radius: rem(16);
        display: flex;
        justify-content: space-between;
        padding: rem(20);
        flex-wrap: wrap;
        .card {
            height: rem(444);
            width: 32.5%;
            background-color: white;
            margin-top: rem(10);
            padding: rem(10);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            >img {
                height: 70%;
                width: 100%;
            }
            >p {
                display: block;
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #333;
            }
            >div {
                display: flex;
                justify-content: center;
                align-content: center;
                width: 100%;
                height: rem(30);
                color: #999;
                font-size: rem(18);
                >div {
                    padding-top: rem(12);
                    padding-right: rem(10);
                }
                p {
                    color: red;
                    span {
                        font-size: rem(30);
                    }
                }
            }
            >span {
                display: block;
                background-color: #E01222;
                color: white;
                text-align: center;
                height: rem(30);
                width: 50%;
                line-height: rem(30);
                font-size: rem(14);
            }
        }
    }
    .back-top {
        width: rem(184);
        height: rem(73);
        background: url('../../images/zhsh_1012/qcwd/back-top.png')no-repeat center/100% 100%;
        margin: rem(30) auto;
    }
}